.c-lerp-block {
    font-weight: $bold;
    text-transform: uppercase;
    margin-bottom: rem(160px);

    @media (min-width: $from-medium) {
        &:not(:first-child) {
            margin-top: rem($unit);
        }
    }
    @media (max-width: $to-medium) {
        margin-top: rem($unit/2);
    }
}

.c-lerp-block_index {
    vertical-align: middle;
    color: $beige;
    width: rem(60px);
    height: rem(45px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: rem(20px);
    position: relative;
    z-index: 1;

    &::before {
        content:"";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: -1;
        background-color: $black;
        border-radius: 50%;
        transform: scale(0);
        transition: transform 0.6s $bounce;
    }

    &.is-inview {
        &::before {
            transform: scale(1);
            transition-delay: 0.3s;
        }
    }
}

.c-lerp-block_title {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    margin-left: rem(20px);
    line-height: 1.1;

    &.is-inview {
        >span:not([data-scroll]) {
            opacity: 1;
            transform: none;
            transition-delay: 0.4s;
        }
    }

    >span:not([data-scroll]) {
        opacity: 0;
        transform: translateY(60px);
        transition: opacity 0.6s $easing, transform 0.6s $easing;
    }

    span {
        display: inline-block;
        min-width: 0.3em;

        @media (max-width: $to-small) {
            font-size: rem(25px);
        }

        @media (min-width: $from-small) {
            font-size: rem(70px);
        }
    }
}
